<template>
  <div class="course-detail flex">
    <div class="overview">
      <div class="text flex-c can-click" @click="chooseOverView()" :class="{'active': overViewBtnActive}">课程总览</div>
      <div class="overview-tree">
        <div class="course-tree" v-for="(item, i) in courseTree" :key="i">
          <div class="title">{{ item.chapterName }}</div>
          <el-tree class="i-tree" :data="item.children" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
      </div>
    </div>
    <div class="detail">
      <component :is="component" :choose-tree-data="chooseTreeData"></component>
    </div>
  </div>
</template>

<script>
  import overView from './components/overview';
  import courseDetail from './components/detail';
  export default {
    name: "courseDetail",
    components: { overView, courseDetail },
    data(){
      let query = this.$route.query;
      return {
        courseTree: [],
        defaultProps: {
          children: 'children',
          label: 'chapterName'
        },
        component: overView,
        overViewBtnActive: true,
        courseId: query.id,
        chooseTreeData: {}, // 选中的树形信息
        courseChapterId: '',
      }
    },
    created(){
      this.getCourseTree();
    },
    mounted(){},
    beforeDestroy() {},
    methods: {
      /**
       * 点击课程总览
       **/
      chooseOverView(val){
        this.overViewBtnActive = true;
        this.component = overView;
      },
      /**
       * 点击树形
       **/
      handleNodeClick(data, node, val){
        if((node.level === 1 && !data.children.length) || node.level === 2){
          this.overViewBtnActive = false;
          this.component = courseDetail;
          this.chooseTreeData = data;
        }
      },
      getCourseTree(){
        let param = {
          courseOverviewId: this.courseId,
        };
        this.Request.courseTree({params: param}).then(res=>{
          this.courseTree = res.data || [];
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../../css/module/courseDetail";
</style>
